<template>
  <Row>
    <dtable 
      :columns="columns" 
      :data-all="dataAll" 
      :data-show="dataShow" 
      :loading="loading" 
      add 
      assign 
      check 
      op 
      @refresh="getall()" 
      @add="add" 
      @del="del" 
      @edit="edit" 
      @delCheck="delCheck" 
      @assign="assign"
    />
    <Modal 
      v-model="editData" 
      title="角色信息" 
      :loading="loading" 
      :mask-closable="false" 
      class="editm" 
      @on-ok="asyncOK" 
      @on-cancel="asyncCancel"
    >
      <Form 
        ref="editForm" 
        :model="formItem" 
        :label-width="80" 
        :rules="ruleValidate"
      >
        <Form-item 
          label="名称" 
          prop="Name"
        >
          <Input 
            v-model="formItem.Name" 
            placeholder="请输入"
          ></Input>
        </Form-item>
        <Form-item 
          label="类型" 
          prop="Type"
        >
          <Radio-group v-model.number="formItem.Type">
            <Radio label="0">超级</Radio>
            <Radio label="1">系统级</Radio>
            <Radio label="2">组织级</Radio>
            <Radio label="3">部门级</Radio>
            <Radio label="4">个人级</Radio>
          </Radio-group>
        </Form-item>
        <Form-item 
          label="状态" 
          prop="Status"
        >
          <Radio-group v-model.number="formItem.Status">
            <Radio label="1">启用</Radio>
            <Radio label="0">停用</Radio>
          </Radio-group>
        </Form-item>
        <Form-item 
          label="说明" 
          prop="Remark"
        >
          <Input 
            v-model="formItem.Remark" 
            type="textarea" 
            :autosize="{minRows: 2,maxRows: 5}" 
            placeholder="请输入..."
          >
        </Input>
        </Form-item>
      </Form>
    </Modal>
    <Modal 
      v-model="assignData" 
      title="角色分配资源" 
      :mask-closable="false" 
      class="editm" 
      @on-ok="assignOK"
    >
      <Tree 
        ref="roleTree" 
        :data="assignItem" 
        multiple 
        show-checkbox
      />
    </Modal>
  </Row>
</template>

<script>
import dtable from "@/components/table/dtable.vue";
export default {
  components: {
    dtable
  },
  data() {
    return {
      loading: false, //数据刷新遮罩层
      columns: [
        {
          title: "名称",
          key: "Name",
          width: 280
        },
        {
          title: "类型",
          key: "Tname"
        },
        {
          title: "说明",
          key: "Remark"
        },
        {
          title: "状态",
          key: "Sname",
          sortable: true
        }
      ], //表格样式
      dataAll: [], //表格数据来源
      dataShow: true, //是否显示表格数据查看表单
      editData: false, //显示编辑表单
      formItem: {
        Name: "",
        Status: 1,
        Type: 4,
        Remark: ""
      }, //数据编辑表单
      ruleValidate: {
        Name: [
          {
            required: true,
            message: "名称不能为空",
            trigger: "blur"
          }
        ]
        // Type: [
        //   { required: true, message: '类型不能为空', trigger: 'change' }
        // ],
      }, //数据编辑表单验证规则
      addid: 0, //0为修改模式，1为添加模式
      roleid: "",
      assignData: false,
      assignItem: []
    };
  },
  computed: {
    // ...mapState(['isLogin', 'captchaUrl', 'cptId', 'msg']),
    //      过滤数据
    filiterTableDate() {
      let e = this.dataAll.slice();
      let keys = this.searchKey;
      let filterData = function(element) {
        if (keys === "") {
          return true;
        }
        for (let o in element) {
          if (String(element[o]).indexOf(keys) >= 0) {
            return true;
          }
        }
        return false;
      };
      let fdata = e.filter(filterData);
      this.total = fdata.length;
      return fdata;
    },
    //      当前显示数据
    curTableData() {
      let from = this.pageSize * (this.current - 1);
      let to = from + this.pageSize;
      return this.filiterTableDate.slice(from, to);
    },
    //      父资源名称
    parentRes() {
      let pr = [
        {
          Id: 0,
          Name: "根目录"
        }
      ];
      for (let e in this.dataAll) {
        if (this.dataAll[e].Type === 1 && this.dataAll[e].Pid === 0) {
          pr.push({
            Name: this.dataAll[e].Name,
            Id: this.dataAll[e].Id
          });
        }
      }
      return pr;
    },
    //状态数据转换
    fStauts() {
      if (this.formItem.Status === 1) {
        return true;
      } else {
        return false;
      }
    }
  },
  watch: {},
  mounted() {
    let self = this;
    self.getall();
  },
  methods: {
    //获取角色资源列表
    getResTree(id) {
      this.$api.getResource().then(res => {
        if (!res.error) {
          this.dataAll = res.Data;
          this.total = res.Data.length;
        } else {
          this.$Message.error(res.msg);
          this.loading2 = false;
        }
      });
    },
    //     获取资源名称
    getNameById(value) {
      let rname = "";
      if (value || "") {
        let rv = this.dataAll.filter((col, index) => col.Id === value);
        rname = rv[0].Name;
      }
      return rname;
    },
    getall() {
      this.loading = true;
      this.$api.getRole().then(res => {
        if (!res.error) {
          this.dataAll = res.Data;
          this.total = res.Data.length;
        } else {
          this.$Message.error(res.message);
          this.loading2 = false;
        }
        this.loading = false;
      });
    },
    edit(index) {
      this.addid = 0;
      this.formItem = index;
      this.editData = true;
    },
    add() {
      this.addid = 1;
      this.$refs["editForm"].resetFields();
      this.editData = true;
    },
    asyncOK() {
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          if (this.addid === 0) {
            this.$api.updateRole(this.formItem).then(res => {
              if (!res.error) {
                this.getall();
                this.$Message.success(res.message);
              } else {
                this.$Message.error(res.message);
              }
            });
          } else if (this.addid === 1) {
            this.$api.addRole(this.formItem).then(res => {
              if (!res.error) {
                this.getall();
                this.$Message.success(res.message);
              } else {
                this.$Message.error(res.message, 4);
              }
            });
          }
          this.$refs["editForm"].resetFields();
          setTimeout(() => {
            this.editData = false;
          }, 1000);
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    },
    asyncCancel() {
      this.$refs["editForm"].resetFields();
      this.getall();
    },
    del(row) {
      this.$api.deleteRole(row).then(res => {
        if (!res.error) {
          this.getall();
          this.$Message.success(res.message);
        } else {
          this.$Message.error(res.message, 4);
        }
      });
    },
    delCheck(row) {
      console.log("sdsdsds", row);
      this.$api.deleteRoles(row).then(res => {
        if (!res.error) {
          this.getall();
          this.$Message.success(res.message);
        } else {
          this.$Message.error(res.message, 4);
        }
      });
    },
    assign(row) {
      if (row.length === 1) {
        this.roleid = row[0];
        this.$api.GetRoleResourceTree(row[0]).then(res => {
          if (!res.error) {
            console.log(res.Data);
            this.assignItem = res.Data.children;
            this.assignData = true;
          } else {
            this.$Message.error(res.message, 4);
          }
        });
      } else {
        this.$Message.error("角色授权必须选择一个角色进行授权！", 4);
      }
    },
    assignOK() {
      let rdata = {};
      rdata["Roleid"] = this.roleid;
      console.log(this.roleid);
      rdata["Resources"] = this.$refs.roleTree.getCheckedNodes();
      this.$api.AssignResources(rdata).then(res => {
        if (!res.error) {
          this.$Message.success(res.message);
        } else {
          this.$Message.error(res.message, 4);
        }
      });
    }
  },
};
</script>
